﻿@page "/checkbox"
@page "/docs/guides/components/checkbox.html"
<RadzenText TextStyle="TextStyle.H2" TagName="TagName.H1" class="rz-pt-8">
    CheckBox
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
    Demonstration and configuration of the Radzen Blazor <strong>CheckBox</strong> component.
</RadzenText>

<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
    These demos showcase checkbox inputs with two-way data binding, change event handling, tri-state support (checked/unchecked/indeterminate), and disabled or read-only states.
</RadzenText>

<RadzenText Anchor="checkbox#get-set-value" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Get and Set the value of CheckBox
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    As all Radzen Blazor input components the <strong>CheckBox</strong> has a Value property which gets and sets the value of the component. Use <code>@@bind-Value</code> to get the user input.
</RadzenText>
<RadzenExample ComponentName="CheckBox" Example="CheckBoxBindValue">
    <CheckBoxBindValue />
</RadzenExample>

<RadzenText Anchor="checkbox#value-and-change-event" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Get and Set the value of CheckBox using Value and Change event
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Value property can be used to set the value of the component and <code>Change</code> event to get the user input.
</RadzenText>
<RadzenExample ComponentName="CheckBox" Example="CheckBoxChangeEvent">
    <CheckBoxChangeEvent />
</RadzenExample>

<RadzenText Anchor="checkbox#tristate-checkbox" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    TriState CheckBox
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use <code>TriState="true"</code> to enable three states: checked, unchecked, and indeterminate.
</RadzenText>
<RadzenExample ComponentName="CheckBox" Example="CheckBoxTriState">
    <CheckBoxTriState />
</RadzenExample>

<RadzenText Anchor="checkbox#disabled-checkbox" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Disabled CheckBox
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use <code>Disabled="true"</code> to disable the CheckBox and prevent user interaction.
</RadzenText>
<RadzenExample ComponentName="CheckBox" Example="CheckBoxDisabled">
    <CheckBoxDisabled />
</RadzenExample>

<RadzenText Anchor="checkbox#readonly-checkbox" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
  ReadOnly CheckBox
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
  Use <code>ReadOnly="true"</code> to make the CheckBox read-only, preventing changes while keeping it interactive.
</RadzenText>
<RadzenExample ComponentName="CheckBox" Example="CheckBoxReadOnly">
  <CheckBoxReadOnly />
</RadzenExample>

<RadzenText Anchor="checkbox#keyboard-navigation" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Keyboard Navigation
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    The following keys or key combinations provide a way for users to navigate and interact with Radzen Blazor CheckBox component.
</RadzenText>

<KeyboardNavigationDataGrid Data="@shortcuts" />

@code {
    public List<KeyboardShortcut> shortcuts = new()
    {
        new KeyboardShortcut { Key = "Tab", Action = "Navigate to a CheckBox." },
        new KeyboardShortcut { Key = "Space", Action = "Change the state of a focused CheckBox switching between checked and not checked." }
    };
}
